<template>
  <div>
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>文章管理</el-breadcrumb-item>
      <el-breadcrumb-item>发布文章</el-breadcrumb-item>
    </el-breadcrumb>
    <div style="display: flex">
      <el-select v-model="Blog.cid" placeholder="请选择文章分类">
        <el-option
            required="required"
            v-for="(item,key) in types"
            :key="key"
            :label="item.category"
            :value="item.cid">
        </el-option>
      </el-select>
      <el-input required="required" v-model="Blog.title" placeholder="请输入文章标题" style="width: 400px;margin-left: 20px;margin-right: 20px"></el-input>
      <el-select v-model="Blog.tag_id" value-key="value" multiple placeholder="请选择文章标签">
        <el-option
            v-for="(item,key) in tags"
            :key="key"
            :label="item.tag"
            :value="item.tid">
        </el-option>
      </el-select>
      <el-switch  active-text="推荐" inactive-text="不推荐" v-model="Blog.recommed" style="display: block;margin-left: 20px;margin-top: 5px"></el-switch>
    </div>
    <mavon-editor
        v-model="content"
        ref="md"
        @change="change"
        @imgAdd="$imgAdd"
        style="min-height: 500px;overflow-y: scroll;max-height: 500px"
    />
    <div style="display: flex;margin-top: 10px;justify-content: flex-end;">
      <el-button type="success" @click="publishBlog(false)">博客保存草稿</el-button>
      <el-button type="primary" @click="publishBlog(true)">发布博客</el-button>
    </div>
  </div>
</template>

<script>
import { mavonEditor } from 'mavon-editor'
import 'mavon-editor/dist/css/index.css'
export default {
  data () {
    return {
      fileList: [],
      content: '',
      html: '',
      types: [],
      tags: [],
      Blog: {
        title: '',
        cid: '',
        content: '',
        is_published: '',
        readTime: '',
        tag_id: [],
        recommed: true,
        discribe: ''
      }
    }
  },
  components: {
    mavonEditor
  },
  methods: {
    // 将图片上传到服务器，返回地址替换到md中
    $imgAdd (pos, $file) {
      const formdata = new FormData()
      formdata.append('file', $file)
      console.log(formdata.get('file'))
      this.$axios.post('/upload/picture', formdata).then(res => {
        this.$refs.md.$img2Url(pos, 'https://api.luoqianyi.top' + res.data)
      }).catch(err => {
        console.log(err)
      })
    },
    change (value, render) {
      this.html = render
      this.Blog.content = render
      console.log(render)
    },
    getTags () {
      this.$axios({
        method: 'post',
        url: '/getTags',
        data: {}
      }).then(response => {
        console.log(response.data)
        this.$set(this, 'tags', response.data)
      }).catch(error => {
        console.log(error)
      })
    },
    getTypes () {
      this.$axios({
        url: '/getCate',
        method: 'post',
        data: {}
      }).then(response => {
        console.log(response.data)
        this.$set(this, 'types', response.data)
      }).catch(error => {
        console.log(error)
      })
    },
    publishBlog (published) {
      if (this.Blog.cid.length === 0) {
        this.$message.error('发布失败！请选择博客分类！')
      } else if (this.Blog.title === '') {
        this.$message.error('发布失败！请填写文章标题！')
      } else {
        this.Blog.is_published = (published === true ? 1 : 0)
        this.Blog.tag_id = '' + this.Blog.tag_id
        this.Blog.content = this.html
        this.Blog.discribe = this.removeSpecialChar(this.content)
        this.Blog.readTime = parseInt(this.Blog.discribe.length / 275) + 1
        this.Blog.recommed = (this.Blog.recommed === true ? 1 : 0)
        this.$axios({
          method: 'post',
          url: '/insertArticle',
          data: this.Blog
        }).then(response => {
          console.log(response)
          if (response.status !== 200 || response.data < 1) this.$message.error('添加失败,文章标题重复或网络断开！')
          else if (published && response.status === 200) {
            this.$message.success('博客发布成功!')
            this.$router.go(0)
          } else if (!published && response.status === 200) this.$message.success('博客保存成功!')
        })
      }
    }
  },
  mounted () {
    this.getTags()
    this.getTypes()
  }
}
</script>

<style lang="less" scoped>
.upload-demo{
  margin-left: 20px;
}
</style>
